import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaTab, WeaNewScroll, WeaButtonIcon, WeaSearchGroup, WeaFormItem } from 'ecCom';
import { Spin, Modal } from 'antd';
import { WeaTableNew, WeaSwitch } from 'comsMobx';
import '../../../style/index';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;
@inject('carManagerStore')
@observer
export default class CarInfo extends React.Component {
  render() {
    const { carManagerStore, carInfoStore } = this.props;
    const { status, shareListStore } = carManagerStore;
    const { isshare } = carInfoStore;
    const { createOrEdit, editSelKey, createRoomLoading } = toJS(status);
    const topTab = [
      {
        title: `${getLabel(20316, '车辆信息')}`,
        groupid: 'msg',
        viewcondition: 0,
      },
      {
        title: `${getLabel(82752, '共享范围')}`,
        groupid: 'shareScope',
        viewcondition: 1,
      },
    ];
    return (
      <div className="wea-meetingback-createroom" style={{ height: '100%' }}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@c5ud0q`} spinning={createRoomLoading} style={{ paddingTop: 53 }}>
          {
            createOrEdit == 0 || isshare == '0' ?
              this.getSearchs() :
              <div style={{ height: '100%' }}>
                <WeaTab
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@has593`}
                  datas={topTab}
                  keyParam="viewcondition"
                  countParam="groupid"
                  selectedKey={editSelKey}
                  buttons={this.getTabBtns()}
                  onChange={v => carManagerStore.setState({ editSelKey: v })}
                />
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7otxgt`} height={'470px'}>
                  {
                    editSelKey == 0 ?
                      this.getSearchs() :
                      <WeaTable
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@kdv3yw`}
                        comsWeaTableStore={shareListStore}
                        hasOrder
                        needScroll
                        rowSelection={{ onChange: selectedRowKeys => carManagerStore.setState({ createSelectIds: selectedRowKeys }) }}
                        onOperatesClick={(record, index, operate, flag) => this.onOperatesClick(record, index, operate, flag)}
                      />
                  }
                </WeaNewScroll>
              </div>
          }
        </Spin>
      </div>
    );
  }

  getTabBtns = () => {
    const { carManagerStore } = this.props;
    const { editSelKey, createSelectIds, disabled } = toJS(carManagerStore.status);
    const btns = (editSelKey == 0 || disabled) ? [] :
      [
        (<WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@7uv8ja@addShare`} buttonType="add" type="primary" onClick={() => carManagerStore.addShare()} />),
        (<WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@7i7dh5@delShareConfirm`} buttonType="del" type="primary" disabled={createSelectIds.length == 0} onClick={() => carManagerStore.delShareConfirm()} />),
      ];
    return btns;
  }

  onOperatesClick = (record, index, operate, flag) => {
    const { carManagerStore } = this.props;
    const { selectId } = toJS(carManagerStore.status);
    if (operate.index == '0') { // 删除
      Modal.confirm({
        title: `${getLabel(131329, '信息确认')}`,
        content: `${getLabel(82017, '确认删除？')}`,
        okText: `${getLabel(382958, '确定')}`,
        cancelText: `${getLabel(31129, '取消')}`,
        onOk: () => carManagerStore.delShare({ carid: selectId, ids: record.id }),
      });
    }
  }

  getSearchs=() => {
    const { conditioninfo, form, onChange } = this.props;
    const { isFormInit } = form;
    const group = [];
    isFormInit && conditioninfo.map((c, index) => {
      const items = [];
      c.items.map((fields) => {
        if (fields.domkey[0] == 'usefee') {
          fields.tip = getLabel(17647, '元/公里');
          fields.min = 0;
        } else if (fields.domkey[0] == 'price') {
          fields.tip = getLabel(385832, '(RMB￥，只能为数字)');
          fields.min = 0;
        }
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@m28qah@${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@fk9g5l@${fields.domkey[0]}`} fieldConfig={fields} form={form} onChange={onChange} />
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ywtpxl@${index}`} col={1} needTigger={false} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }
}

